<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="photo.css">
    <style>
        body{
            background: url(../../images/bg1.jpg) no-repeat;
            background-size: 300% ;
        }
    </style>
</head>
<body>
<header>
    <h1 align="center" style="font-size: 3em">照片管理</h1>
    <div>   <button class="card-add layui-btn-normal layui-btn" id="add"><i class="layui-icon">&#xe654;</i></button></div>
</header>
<section>



</section>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer;
        let jsonObj = JSON.parse(localStorage.getItem('photo'));
        $('.card-text').on('mouseover mouseout',function (){
          $(this).children('.card-del').toggle()
        })
        $('#add').on('click', function () {
            var index = layer.open({   //弹出层定义
                title: '添加用户',
                type: 2,   //弹出页面
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: 'photo-add.html',
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        })
        //全选按钮

        //删除
        $('.card-del').click(function () {

            ID=  $(this).parent().siblings('.time').children('.id').html()
            console.log(ID)

            del();
            location.reload()
        })
    });

    /////////////////////////////////////////////////////////////////////////////////////////////
    //key 是json数据 IDC是数据长度用来定义Id序号 add是新增的数据 stu是学生的key photo是keY
    if(localStorage.getItem('photo')==null){  //获取初始数据
        $.ajax({
            url:'../../api/photo.json',
            dataType:'json',
            success:function (data){
                let  jsonData=JSON.stringify(data.data)
                localStorage.setItem('photo',jsonData)
                location.reload()
                let index=data.data.length
                localStorage.setItem('pindex',index)
            }
        })
    }
    ///////////////////////添加新数据////////////////////
    let jsonObj=JSON.parse(localStorage.getItem('photo'));
    let oldData;
    /*    let card= `<div className="card">
            <div className="card-text"><img src="" alt="">
                <button className="layui-btn-danger layui-btn card-del"><i className="layui-icon">&#xe640;</i></button>
            </div>
            <div className="card-title">标题</div>
            <div className="time"><span>编号</span><span>time</span></div>
        </div>
        <div className="card">
            <div className="card-text"><img src="" alt="">
                <button className="layui-btn-normal layui-btn card-add" id="add"><i className="layui-icon">&#xe654;</i>
                </button>
            </div>
            <div className="card-title">标题</div>
            <div className="time"><span>编号</span><span>time</span></div>
        </div>`*/
    if(JSON.parse(localStorage.getItem('add'))!=null){//////////////////判断是否初始化
        jsonObj.push(JSON.parse(localStorage.getItem('add')));
        oldData=JSON.stringify(jsonObj)
        localStorage.removeItem('add')
        localStorage.setItem('photo',oldData)
        $.each(jsonObj,function (i,n){
            $('section').append(`<div class="card">
        <div class="card-text"><img src=${jsonObj[i].src} alt="" class="img">
            <button class="card-del layui-btn-danger layui-btn" >   <i class="layui-icon">&#xe640;</i></button>
        </div>
        <div class="card-title">${jsonObj[i].title}</div>
        <div class="time"><span class="id">${jsonObj[i].id}</span><span>${jsonObj[i].time}</span></div>
    </div>`)
        })
    }else  {
       $.each(jsonObj,function (i,n){
            $('section').append(`<div class="card">
        <div class="card-text"><img src=${jsonObj[i].src} alt="" class="img">
            <button class="card-del layui-btn-danger layui-btn" >   <i class="layui-icon">&#xe640;</i></button>
        </div>
        <div class="card-title">${jsonObj[i].title}</div>
        <div class="time"><span class="id">${jsonObj[i].id}</span><span>${jsonObj[i].time}</span></div>
    </div>`)

        })
    }


    //删除函数
    function del(){
        let myValue=ID;
        let delData=JSON.parse(localStorage.getItem('photo'))
        for(let i=0;i<delData.length;i++){
            if (delData[i].id==myValue){
                delData.splice(i,1);
                $('.'+myValue).remove()
                localStorage.setItem('photo',JSON.stringify(delData))
                break;
            }
        }
    }


</script>

</body>

</html>